window.addEventListener('load', function() {
    var focus = this.document.querySelector('.focus');// 轮播图
    var focusUl = this.document.querySelector('.focus-img');//轮播图ul
    var focusLis = this.document.querySelectorAll('.focus-img li');// 轮播图里面的所有li元素
    var circle = this.document.querySelector('.circle');// 所有小圆点ol

    var firstLi = focusLis[0].cloneNode(true);// 第一张图片
    var lastLi = focusLis[focusLis.length - 1].cloneNode(true);// 最后一个图片
    var w = focus.offsetWidth; // 屏幕宽度
    var index = 0; // 初始图片序号
    var toutchMove = 0; // 初始化手指接触的位置
    var move = 0; // 初始化手指移动的距离 = ul移动的距离
    var flag = false; // 避免用户手指按上去，想反悔，让轮播图不动

    //克隆第一张和最后一张
    focusUl.appendChild(firstLi);
    focusUl.insertBefore(lastLi, focusLis[0]);

    //利用tanslate进行动画效果
    var timer = this.setInterval(function (){
        index++;// 第一张图片从0开始，只有3张（实际上5张）

        //执行css动画函数
        var translatex = -index * w; // 滚动的距离
        focusUl.style.transition = 'all 0.3s';
        focusUl.style.transform = 'translateX(' + translatex + 'px)';
    },2000);

    //判断动画到特殊图片
    focusUl.addEventListener('transitionend', function (){// 判断图片到第3张和到-1的时候
        if (index >= focusLis.length){
            index = 0;
            var translateR = -index * w;
            focusUl.style.transition = 'none';//清除动画
            focusUl.style.transform = 'translateX(' + translateR + 'px)';// 移动到第二张图片
        } else if (index < 0){
            index = focusLis.length -1;
            var translateL = -index * w;
            focusUl.style.transition = 'none';//清除动画
            focusUl.style.transform = 'translateX(' + translateL + 'px)';// 移动到第二张图片
        }

        //给小圆点添加类
        circle.querySelector('.current').classList.remove('current');// 移除类名
        circle.children[index].classList.add('current');
    });
    
    // 3 1 2 3 1

    //手指触摸图片滑动，滑动同时关掉定时器
    focusUl.addEventListener('touchstart', function (e){
        clearInterval(timer);
        timer = null;
        toutchMove = e.targetTouches[0].pageX;
    });

    //手指触摸后移动，图片随着手指滑动
    focusUl.addEventListener('touchmove', function(e){
            flag = true; // 触摸即判断为true
            move = e.targetTouches[0].pageX - toutchMove;// 移动的距离
            var translatex = -index * w + move;
            focusUl.style.transition = 'none';
            focusUl.style.transform = 'translateX(' + translatex + 'px)';
    });

    //手指离开定时器再次开启,判断上一张下一张
    focusUl.addEventListener('touchend', function (){
        if (flag){
             //如果移动大于50像素就上/下一张
            if (Math.abs(move) > 50){
                if (move > 0){ // 判断上一张、下一张
                    index--;
                } else {
                    index++;
                }//执行动画
                var translatex = -index * w; // 草！！！ 这里多个了move解决了图片拖动效果问题
                focusUl.style.transition = 'all .3s';
                focusUl.style.transform = 'translateX(' + translatex + 'px)';
            } else {// 回弹
                var translatex = -index * w;
                focusUl.style.transition = 'all .5s';
                focusUl.style.transform = 'translateX(' + translatex + 'px)';
            }
        }

        //清理定时器
        clearInterval(timer);

        //重新开启定时器
        timer = setInterval(function (){
            index++;// 第一张图片从0开始，只有3张（实际上5张）
            
            //执行css动画函数
            var translatex = -index * w; // 滚动的距离
            focusUl.style.transition = 'all 0.3s';
            focusUl.style.transform = 'translateX(' + translatex + 'px)';
        },2000);
    });
})